<template>
  <div class="app" name="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <div class="topbox">
        <div class="nav">
          <ul>
            <li v-if="!$store.state.user">
              <el-button type="text" @click="login">登录</el-button>
              <span class="sep">|</span>
              <el-button type="text" @click="registerClick">注册</el-button>
            </li>
            <li v-else>
              欢迎
              <el-popover width="160" v-model="logoutVisible">
                <p>确定退出登录吗？</p>
                <div style="text-align:right; margin:0">
                  <el-button size="mini" type="text" @click="logoutVisible=false">取消</el-button>
                  <el-button type="primary" size="mini" @click="logout">确定</el-button>
                </div>
                <el-button slot="reference" type="text">{{userName}}</el-button>
              </el-popover>
              
            </li>
            <li>
              <router-link to="/orders">我的订单</router-link>
            </li>
            <li>
              <router-link to="/collect">我的收藏</router-link>
            </li>
            <li @click="toShopcart" :class="getNum > 0 ? 'shopCart-full' : 'shopCart'">
              <i class="el-icon-shopping-cart-full"></i>购物车
              <span class="num">({{getNum}})</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 顶栏容器 -->
      <el-header>
        <el-menu :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#409eff"
        router>

        <div class="logo">
          <router-link to="/">
            <img src="../public/logo.png" alt="/" class="img">
          </router-link>
        </div>

        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/goods">全部商品</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>

        <div class="so">
          <el-input placeholder="请输入搜索内容" v-model="search">
            <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
          </el-input>
        </div>
        </el-menu>
      </el-header>

      <el-main>
        <keep-alive>
           <router-view></router-view>
        </keep-alive>
      </el-main>

      <!-- 底栏容器 -->
      <el-footer>
          <div class="footer">
            <div class="promise_box">
              <div class="promise">
                <p class="text">
                  <a class="icon1" href="javascript:;">7天无理由退换货</a>
                  <a class="icon2" href="javascript:;">满99元全场免邮</a>
                  <a class="icon3" href="javascript:;" style="margin-right:0">100%品质保证</a>
                </p>
              </div>
            </div>

            <div class="github">
              <a href="javascript:void 0" target="_blank">
                <div class="github-but"></div>
              </a>
            </div>

            <div class="mod_help">
              <p>
                <router-link to="/">首页</router-link>
                <span>|</span>
                <router-link to="/goods">全部商品</router-link>
                <span>|</span>
                <router-link to="/about">关于我们</router-link>
              </p>
              <p class="coty">商品版权所有 &copy; 2012-2021</p>
            </div>
          </div>
      </el-footer>
    </el-container>
    <Register ref="register"></Register>
    <login></login>
  </div>
</template>

<script>
import Register from "./components/Register"
import shoppingCartAPI from "./http/shoppingCartApi";
import{mapGetters,mapActions,mapMutations} from "vuex"

export default {
  created(){
    let userInfo=window.localStorage.getItem('user');
    if(userInfo){
      this.setUser(JSON.parse(userInfo));
    }
  },
  computed:{
    ...mapGetters(["userInfo","userName"])
  },
  watch:{
    userInfo(value){
      if(value){
        this.getShoppingCart(value.user_id)
      }
    }
  },
  components:{
    Register
  },
  data() {
    return {
      getNum:0,
      search:'',
      logoutVisible:false
    }
  },
  methods:{
    ...mapMutations(["setUser","setShowlogin"]),
    // 点击登录
    login(){
      this.setShowlogin(true)
    },

	  // 搜索按钮
	  searchClick(){
		  let searchStr=this.search.trim();
		  this.search="";
		  if(!searchStr) return;
		  this.$router.push({
			  path:"/goods",
			  query:{
				  search:searchStr
			  }
		  })
	  },

    // 注册按钮
    registerClick(){
      this.$refs.register.showRegister();
    },

    //获取购物车信息
     async getShoppingCart(userId){
       let {data:res} = await shoppingCartAPI.getShoppingCart({user_id:userId});
       if(res.code !=="001"){
         // 清空本地
         window.localStorage.clear();
         // 清空vuex中的信息
         this.setUser(null);
         // 提示用户重新登录
         this.$notifyError(res.msg);
       }else{
         res.shoppingCartData.forEach((item)=>{
           this.getNum+=item.num
         })
         this.$store.dispatch('setShopCart',res.shoppingCartData)
       }
     },
    // 退出登录
    logout(){
     this.logoutVisible=false; // 退出登录框提示隐藏
     this.setUser(null) // vuex中的用户信息
     // localStorage中的信息
     window.localStorage.clear();
     this.$notifySuccess("成功退出登录");
     // 清空页面中的购物车信息
     this.getNum=0
    },
    toShopcart(){
      this.$router.push('/shopcart')
    }
  }
};
</script>

<style lang="scss">
*{
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
.app .el-header{
padding: 0;
}

.app .el-main{
  min-height: 300px;
  padding: 20px 0;
}

.app .el-footer{
  padding: 0;
}

a,
a:hover{
  text-decoration: none;
}

.topbox{
  height: 40px;
  background-color: #3b3b3b;
  margin-bottom: 20px;
}

.topbox .nav{
  width: 1225px;
  margin: 0 auto;
}

.topbox .nav ul {
  float: right;
}

.topbox .nav li{
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}

.topbox .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}

.topbox .nav li .el-button{
  color: #b0b0b0;
}

.topbox .nav .el-button:hover{
  color: white;
}

.topbox .nav li a{
  color: #b0b0b0;
}

.topbox .nav a:hover{
  color: white;
}

.topbox .nav .shopCart{
  width: 120px;
  background: #424242;
}

.topbox .nav .shopCart:hover{
  color: orangered;
  background-color: white;
}



.topbox .nav .shopCart-full{
  width: 120px;
  background: orangered;
}

.topbox .nav .shopCart-full a{
  color: white;
}

// 顶栏容器
.img{
  height: 60px;
}
.el-header .el-menu{
  max-width: 1225px;
  margin: 0 auto;
}

.el-header .logo{
  height: 60px;
  width: 189px;
  float:left;
  margin-right: 100px;
}

.el-header .so{
  margin-top: 10px;
  width: 300px;
  float: right;
}
// 底栏容器
.footer{
  width: 100%;
  text-align: center;
  background: #2f2f2f;
  padding-bottom: 20px;
}

.footer .promise_box{
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}

.footer .promise_box{
  margin: 0 auto;
  border-bottom: 1px solid #3b3b3b;
  line-height: 145px;
}

.footer .promise_box .promise p a{
  color: white;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url("./assets/img/us-icon.png") no-repeat  left 0;
}

.footer .github{
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}

.footer .github .github-but{
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background: url("./assets/img/github.png") no-repeat;
}

.footer .mod_help{
  text-align: center;
  color: #888888;
}

.footer .mod_help p{
  margin: 20px 0 16px 0;
}

.footer .mod_help p a{
  color: #888888;
  text-decoration: none;
}

.footer .mod_help p a:hover{
  color: white;
}

.footer .mod_help p span{
  padding: 0 22px;
}
</style>
